/**
{
"style":{
"navigationBarTitleText":"车辆管理",
"navigationStyle": "default"
}
}
*/

<template>
	<view :class="[isiPhone? 'pb-180':'pb-140', 'char']">

		<view class="form-page form-base">

			<view class="form-item flex-lr-tbc">
				<view class="le">
					车牌号
				</view>

				<view class="right flex-tbc input-right">
					<input type="text" v-model="formData.code" placeholder="请输入"
						placeholder-class="color: #BDBDBD;font-size: 30rpx;" @input="headerInput">
				</view>
			</view>

			<view class="form-item flex-lr-tbc">
				<view class="le">
					品牌型号（选填）
				</view>

				<view class="right flex-tbc input-right">
					<input type="text" v-model="formData.pin" placeholder="请输入"
						placeholder-class="color: #BDBDBD;font-size: 30rpx;">
				</view>
			</view>


			<view class="form-item flex-lr-tbc">
				<view class="le">
					车辆类型
				</view>

				<view class="right flex-tbc input-right">
					<view class="tab-list display_flex">
						<view class="active item flex-all-c" v-for='item in charType' :key='item.value'
							@click='onCharType(item)'>

							<image v-show="charV == item.value" class="wh28" src="__ROOT__/common/images/radio1-2.png"
								mode="">
							</image>
							<image v-show="charV != item.value" class="wh28" src="__ROOT__/common/images/radio1-1.png"
								mode="">
							</image>

							<view class="label">
								{{item.label}}
							</view>
						</view>
					</view>

				</view>
			</view>


			<view class="form-item flex-lr-tbc" @click="onShowPick(1)">
				<view class="le flex-shrink">
					车辆分类
				</view>

				<view class="right flex-tbc input-right">
					<picker-text class="picker-s" :pickerValue="charInfo.name" placeholder="请选择" />

					<image class="w11 h19 ml10" src="__ROOT__/common/images/row-r1.png" mode=""></image>
					<!-- <input type="text" placeholder="请选择车辆" placeholder-class="color: #BDBDBD;font-size: 30rpx;"> -->

				</view>
			</view>
		</view>

		<view class="form-page form-base">
			<view class="form-item flex-lr-tbc" @click="onShowDate(1)">
				<view class="le">
					保险到期时间（选填）
				</view>

				<view class="right flex-tbc input-right">
					<picker-text class="picker-s" :pickerValue="formData.b_day" placeholder="请选择" />

					<image class="w11 h19 ml10" src="__ROOT__/common/images/row-r1.png" mode=""></image>

				</view>
			</view>


			<view class="form-item flex-lr-tbc" @click="onShowDate(2)">
				<view class="le">
					行驶证注册日期
				</view>

				<view class="right flex-tbc input-right">
					<picker-text class="picker-s" :pickerValue="formData.y_day" placeholder="请选择" />

					<image class="w11 h19 ml10" src="__ROOT__/common/images/row-r1.png" mode=""></image>

				</view>
			</view>


			<!-- <view class="form-item flex-lr-tbc">
				<view class="le">
					违章总数
				</view>

				<view class="right flex-tbc input-right">
					<input type="number" v-model="formData.num" placeholder="请输入"
						placeholder-class="color: #BDBDBD;font-size: 30rpx;" @input="inputNum($event, 3)">
				</view>
			</view> -->


			<!-- <view class="form-item flex-lr-tbc">
				<view class="le">
					违章处理情况
				</view>

				<view class="right flex-tbc input-right">
					<view class="tab-list display_flex">
						<view class="active item flex-all-c" v-for='item in chuliType' :key='item.value'
							@click='onWZType(item)'>

							<image v-show="formData.w_state == item.label" class="wh28"
								src="__ROOT__/common/images/radio1-2.png" mode="">
							</image>

							<image v-show="formData.w_state != item.label" class="wh28"
								src="__ROOT__/common/images/radio1-1.png" mode="">
							</image>

							<view class="label">
								{{item.label}}
							</view>
						</view>
					</view>

				</view>
			</view> -->
		</view>

		<view class="form-page form-base">
			<view class="form-item flex-lr-tbc">
				<view class="le">
					车辆所有人
				</view>

				<view class="right flex-tbc input-right">
					<input type="text" v-model="formData.car_name" placeholder="请输入"
						placeholder-class="color: #BDBDBD;font-size: 30rpx;">
				</view>
			</view>

			<view class="form-item flex-lr-tbc">
				<view class="le">
					车辆所有人电话
				</view>

				<view class="right flex-tbc input-right">
					<input type="number" v-model="formData.car_mobile" maxlength="11" placeholder="请输入"
						placeholder-class="color: #BDBDBD;font-size: 30rpx;" @input="inputNum($event, 1)">
				</view>
			</view>

			<view class="form-item flex-lr-tbc">
				<view class="le">
					联系人（选填）
				</view>

				<view class="right flex-tbc input-right">
					<input type="text" v-model="formData.name" placeholder="请输入"
						placeholder-class="color: #BDBDBD;font-size: 30rpx;">
				</view>
			</view>

			<view class="form-item flex-lr-tbc">
				<view class="le">
					联系人电话（选填）
				</view>

				<view class="right flex-tbc input-right">
					<input type="number" v-model="formData.mobile" maxlength="11" placeholder="请输入"
						placeholder-class="color: #BDBDBD;font-size: 30rpx;" @input="inputNum($event, 2)">
				</view>
			</view>
		</view>

		<view class="form-page form-base">
			<view class="form-item">
				<view class="le">
					行驶证照片
				</view>

				<view class="right flex-tbc mt20">
					<upload-image :fileList="fileList" :maxCount="6" @upload="upload" />
				</view>
			</view>
		</view>


		<view :class="[isiPhone? 'pb-68':'pb-32', 'fixed_b']">
			<view class="footer-f">
				<view class="btn-w" @click="subAdd" v-if="!formData.id">
					确认添加
				</view>

				<view class="btns-bottom-base flex-lr-tbc" v-else>
					<view class="btn btn1" @click="onDel">
						删除
					</view>

					<view class="btn btn2" @click="subAdd">
						保存
					</view>
				</view>
			</view>
		</view>

		<u-datetime-picker :show="showDate" v-model="dateV" mode="date" :minDate="minDate" closeOnClickOverlay
			@cancel="showDate = false" @close="showDate = false" @confirm="confirmDate"
			confirmColor="#128F8F"></u-datetime-picker>

		<xi-select ref="selectRef" v-model="selectV" :options="common" :keyName="keyName" @change="onSelect" />
	</view>
</template>
<script setup>
	import {
		inputNumber
	} from '@/utils/global.js'
	import pickerText from '@/components/picker-text.vue'
	import {
		ref,
		onMounted,
		nextTick
	} from 'vue'
	import timeFormat from '@/utils/timeFormat.js'
	const isiPhone = ref('')
	const statusBar = ref('')
	const customBar = ref('')
	const getPageInfo = () => {}
	const initPage = () => {
		isiPhone.value = uni.getStorageSync('isiPhone')
		statusBar.value = uni.getStorageSync('statusBar')
		customBar.value = uni.getStorageSync('customBar')
	}

	const minDate = ref(new Date('2000/01/01').getTime())

	const formData = ref({
		id: '',
		code: '',
		pin: '',
		type: '',
		b_day: '',
		y_day: '',
		num: 0,
		w_state: '已处理',
		car_mobile: '',
		car_name: '',
		mobile: '',
		name: '',
		images: ''
	})

	const charV = ref(2)
	const charType = ref([{
			value: 1,
			label: '电车'
		},
		{
			value: 2,
			label: '非电车'
		},
	])
	const charInfo = ref({})

	const chuliType = ref([{
			value: 1,
			label: '未处理'
		},
		{
			value: 2,
			label: '已处理'
		},
	])

	const headerInput = (e) => {
		// 禁止输入空格
		if (e.detail.value.indexOf(' ') != -1) {
			nextTick(() => {
				formData.value.code = e.detail.value.replace(/\s+/g, '')
			})
		} else {
			formData.value.code = e.detail.value
		}
	}

	const charList = ref([])


	const getCarByType = async (type) => {
		const res = await $post('/index/car_type', {
			type: charV.value
		})
		charList.value = res.list

		if (type == 'init') {
			const list = charList.value.filter(item => item.id == formData.value.type)
			if (list && list.length > 0) {

				charInfo.value = list[0]
			}
		}
	}

	const showDate = ref(false)
	const dateV = ref(timeFormat(new Date()))

	const common = ref([])
	const keyName = ref('')

	const onCharType = (item) => {
		charV.value = item.value
		charInfo.value = {}
		getCarByType()
	}

	const onWZType = (item) => {
		formData.value.w_state = item.label
	}

	const onSelect = (e) => {
		charInfo.value = e
	}

	const timeType = ref(1)
	const onShowDate = (type) => {
		timeType.value = type
		if (type == 1) {
			if (formData.value.b_day) {
				const date = formData.value.b_day.replace(/-/g, '/')

				dateV.value = new Date(date).getTime()

			} else {
				dateV.value = new Date().getTime()
			}
		} else if (type == 2) {
			if (formData.value.y_day) {
				const date = formData.value.y_day.replace(/-/g, '/')

				dateV.value = new Date(date).getTime()
			} else {
				dateV.value = new Date().getTime()
			}
		}
		showDate.value = true
	}

	const confirmDate = (e) => {
		if (timeType.value == 1) {
			formData.value.b_day = timeFormat(e.value)
		} else if (timeType.value == 2) {
			formData.value.y_day = timeFormat(e.value)
		}

		// if(timeType.value == 1) {
		// 	formData.value.b_day = e
		// }
		showDate.value = false
	}




	const selectRef = ref(null)
	const selectV = ref('')


	const onShowPick = () => {
		common.value = charList.value
		keyName.value = 'name'

		selectV.value = charInfo.value.name
		nextTick(() => {
			selectRef.value.show()
		})
	}

	const inputNum = (e, type) => {
		const v = inputNumber(e.detail.value)
		nextTick(() => {
			if (type == 1) {
				formData.value.car_mobile = v
			} else if (type == 2) {
				formData.value.mobile = v
			} else if (type == 3) {
				formData.value.num = v
			}
		})
		// inputNumber(e, formData, 'num')
	}

	const fileList = ref([])
	const upload = (e) => {
		fileList.value = e
	}

	const getCarDetail = async () => {
		const res = await $post('/user/get_car_info', {
			id: formData.value.id
		})
		if (res.info) {
			const data = res.info
			formData.value.id = data.id
			formData.value.code = data.code
			formData.value.pin = data.pin
			formData.value.type = data.type
			formData.value.b_day = data.b_day
			formData.value.y_day = data.y_day
			formData.value.num = data.num + ''
			formData.value.w_state = data.w_state
			formData.value.name = data.name
			formData.value.images = data.images
			formData.value.car_mobile = data.car_mobile
			formData.value.car_name = data.car_name
			formData.value.mobile = data.mobile

			fileList.value = data.images.split(',').map(item => {
				return {
					url: item
				}
			})

			charV.value = data.cate
			getCarByType('init')
		}
	}

	// 删除
	const onDel = async () => {
		const res = await $post('/user/del_car', {
			id: formData.value.id
		})
		if (!res) {
			uni.showToast({
				title: '删除成功',
				icon: 'none'
			})
			setTimeout(() => {
				uni.navigateBack()
			}, 800)
		}
	}

	const subAdd = async () => {
		if (!formData.value.code) {
			uni.showToast({
				title: '请输入车牌号',
				icon: 'none'
			})
			return
		}

		// if (!formData.value.pin) {
		// 	uni.showToast({
		// 		title: '请输入品牌型号',
		// 		icon: 'none'
		// 	})
		// 	return
		// }

		if (!charInfo.value.id) {
			uni.showToast({
				title: '请选择车辆分类',
				icon: 'none'
			})
			return
		}


		// if (!formData.value.b_day) {
		// 	uni.showToast({
		// 		title: '请选择保险到期时间',
		// 		icon: 'none'
		// 	})
		// 	return
		// }

		if (!formData.value.y_day) {
			uni.showToast({
				title: '请选择行驶证注册日期',
				icon: 'none'
			})
			return
		}

		// if (!formData.value.num) {
		// 	uni.showToast({
		// 		title: '请输入违章总数',
		// 		icon: 'none'
		// 	})
		// 	return
		// }
		if (!formData.value.car_name) {
			uni.showToast({
				title: '请输入车辆所有人',
				icon: 'none'
			})
			return
		}

		if (!formData.value.car_mobile) {
			uni.showToast({
				title: '请输入车辆所有人电话',
				icon: 'none'
			})
			return
		}
		
		if (!/^1\d{10}$/.test(formData.value.car_mobile)) {
			 // 请输入 11位手机号
			uni.showToast({
				title: '车辆所有人电话：请输入11位的手机号',
				icon: 'none'
			});
			return;
		}
		if(formData.value.mobile && !/^1\d{10}$/.test(formData.value.mobile)) {
			// 请输入 11位手机号
			uni.showToast({
				title: '联系人电话：请输入11位的手机号',
				icon: 'none'
			});
			return;
			
		}

		if (!fileList.value || fileList.value.length == 0) {
			uni.showToast({
				title: '请上传行驶证照片',
				icon: 'none'
			})
			return
		}

		formData.value.type = charInfo.value.id

		const images = fileList.value.map(item => item.url)
		formData.value.images = images.join(',')

		const res = await $post('/user/edit_car_info', formData.value)

		if (!res) {
			uni.showToast({
				title: '提交成功',
				icon: 'none'
			})

			setTimeout(() => {
				uni.navigateBack()
			}, 800)
		}
	}

	Vue.onShow(() => {
		initPage()
	})

	Vue.onLoad((options) => {
		formData.value.id = options.id
		if (formData.value.id) {
			getCarDetail()
		} else {
			getCarByType()
		}
	})
</script>
<style scoped lang='scss'>
	.form-page {
		background-color: #fff;
		margin-top: 20rpx;
		padding: 20rpx 0;
	}

	.tab-list {
		.item {
			margin-left: 24rpx;
			height: 46rpx;
		}

		.label {
			font-family: OPPOSans, OPPOSans;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			line-height: 40rpx;
			margin-left: 8rpx;
		}
	}
</style>